<template>
  <div class="wrapper">
    <div>
      <HeaderPart>
        确认订单
      </HeaderPart>
    </div>
    <div class="userInfo">
        <p>订单配送至:</p>
        <div class="icon">
          <h2>{{ addressList[0]?.address }}</h2>
          <el-icon @click="toUpdateLocation"><ArrowRightBold /></el-icon>
        </div>
        <p>{{ addressList[0]?.contactName }} {{ addressList[0]?.contactTel  }}</p>
    </div>
    <div class="business_name">
      <p style="font-size: 20px; margin-top: 8px"> {{shopInfo.name}} ( {{shopInfo.description}} ) </p>
    </div>
    <div class="order_info">
      <ul
          v-for="item in cartInfo"
          :key="item.id">
        <li>
          <div class="food_part">
            <div class="fonts">
              <img :src="item.imgUrl">
              <p>{{ item.name }}  {{item.quantity ? 'X'+item.quantity : '' }}</p>
              单价：{{item.price}}元
            </div>
            <h4>￥{{ item.price * item.quantity }}</h4>
          </div>
        </li>
      </ul>
      <div>
        <p style="font-size: 20px">配送费 {{shopInfo.deliveryPrice}} 元</p>
      </div>
    </div>
    <div class="bar">
      <div class="left">
        <p>￥{{totalPrice}}</p>
      </div>
      <div class="right">
        <p @click="toPay">去支付</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import HeaderPart from "@/components/common/HeaderPart";
import {computed, onBeforeMount} from "vue";
import {getAddress} from "@/utils/api/addressManager";
import {ArrowRightBold} from '@element-plus/icons-vue'
import {useRoute, useRouter} from "vue-router";
import { ref} from "vue";
import {getShopById} from "@/utils/api/ShopManager";
import {getCartInfo} from "@/utils/api/cartManager";
import {ElMessage} from "element-plus";
import {addOrderDetail} from "@/utils/api/orderManager";
import {addOrder} from "@/utils/api/orderManager";


// 获得shopId
const shopId = parseInt(useRoute().params.shopId)
// 获得userId
const userId = JSON.parse(localStorage.getItem("userLoginAll")).id
// console.log(userId)
// 获得地址信息
const addressList = ref([])
// 获得门店信息
const shopInfo = ref({})
// 获取购物车信息
const cartInfo = ref([])
onBeforeMount(async ()=>{
  const res = await getAddress({userId})
  addressList.value = res.data
  // 获得门店信息
  const res1 = await getShopById({id:shopId})
  shopInfo.value = res1.data
  // 获得购物车信息
  const res2 =await getCartInfo({userId, shopId})
  cartInfo.value = res2.data.map(item=>{
    const {description, imgUrl, quantity, price, name, foodId, id} = item
    let obj = {description, imgUrl, quantity, price, name, foodId, id}
    return obj;
  })
})
// 计算总价
const totalPrice = computed(
    ()=>{
      let val = 0;
      cartInfo.value.map(item=>{
        val += item.quantity * item.price
      })
      return val + shopInfo.value.deliveryPrice
    }
)
const router = useRouter()
// 前往支付页面
const toPay =async () => {
  if(!addressList.value.length){
    ElMessage.error("你还没填地址")
  }
  else{
    const obj = {userId, shopId, orderTotal:totalPrice.value, addressId: addressList.value[0].id, }
    //插入订单
    const res = await addOrder(obj)
    if(res.flag){
      // 插入订单详情
      const orderId = res.data
      cartInfo.value.map(async item=>{
        const {foodId, quantity} = item
        await addOrderDetail({orderId, foodId, quantity})
      })
      await router.push("/pay-money/" + shopId)
    }
  }

}
// 前往地址修改页
function toUpdateLocation() {
  router.push('/address-control/')
}
</script>

<style scoped>
.food_part {
  display: flex;
  justify-content: space-between;
}
.food_part .fonts {
  display: flex;
  justify-content: space-between;
}
.food_part .fonts p {
  margin-left: 10px;
}
.food_part h4 {
  margin-right: 15px;
}
.wrapper {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  position: relative;
}
.userInfo {
  box-sizing: border-box;
  position: relative;
  background-color: rgba(0, 151, 255, 0.99);
  height: 6rem;
  width: 100%;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px;
  margin-top: 65px;
}
.userInfo p {
  margin: 0;
}
.userInfo .icon {
  display: flex;
  width: 100%;
  position: relative;
}
.userInfo .icon h2 {
  margin: 0;
}
.userInfo .icon i {
  position: absolute;
  right: 50px;
  top:5px
}
.business_name {
  box-sizing: border-box;
  border-width: 1px 0;
  border-style: solid;
  border-color: #AEAEAE;
  height: 2.5rem;
  width: 100%;
  margin-top: 10px;
}
.order_info {
  height: 100%;
  width: 100%;
}
.order_info p {
  margin:0 20px;
}
.order_info ul {
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.order_info ul li {
  margin: 10px;
}

.order_info img {
  padding-left: 1rem;
  height: 4rem;
  width: 5rem;
}
.bar {
  position: fixed;
  left: 0;
  bottom: 0;
  height: 4rem;
  width: 100vw;
  z-index: 100;
  display: flex;
}
.bar .left {
  background-color: #505052;
  height: 100%;
  width: 60%;
}
.bar .right {
  height: 100%;
  background-color: #35c973;
  width: 40%;
}
.bar .right p {
  text-align: center;
  color: white;
  vertical-align: center;
  font-size: 20px;
}
.bar .left p {
  color: white;
  font-size: 2rem;
  margin: 0;
  padding-top: 10px;
  vertical-align: center;
  text-align: center;
}

</style>